<template>
  <el-dialog
    v-model="visible"
    :title="!dataForm.transportId ? $t('crud.addTitle') : $t('user.editBtn')"
    :close-on-click-modal="false"
    width="72%"
    class="transport-pop"
    @close="onClose"
  >
    <el-form
      ref="dataFormRef"
      v-loading="loading"
      :model="dataForm"
      label-width="auto"
      @submit.prevent
      @keyup.enter="onSubmit()"
    >
      <el-form-item
        :label="$t('transport.name')"
        prop="transName"
        maxlength="36"
        show-word-limit
        :rules="[{ required: true, message: $t('shop.templateNameCannotBeEmpty')}]"
      >
        <el-input
          v-model="dataForm.transName"
          :placeholder="$t('transport.name')"
          maxlength="36"
          show-word-limit
        />
      </el-form-item>
      <el-form-item
        :label="$t('transport.chargePrice')"
        prop="chargeType"
      >
        <el-radio-group
          v-model="dataForm.chargeType"
          :disabled="dataForm.isFreeFee == 1"
          @change="onChangeChargeType"
        >
          <el-radio :label="0">
            {{ $t("transport.byCount") }}
          </el-radio>
          <el-radio :label="1">
            {{ $t("transport.byWeight") }}
          </el-radio>
          <el-radio :label="2">
            {{ $t("transport.byVolume") }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 添加可配送的区域和邮费 START -->
      <div class="area-transfee-table">
        <el-table
          :data="dataForm.transfees"
          header-cell-class-name="table-header"
          row-class-name="table-row-low"
          style="width: 100%;"
        >
          <el-table-column
            :label="$t('transport.distributableArea')"
          >
            <template #default="scope">
              <span v-if="scope.$index == 0&& dataForm.isFreeFee==1">{{ $t("transport.allRegions") }}</span>
              <template v-if="dataForm.isFreeFee==0">
                <span
                  v-if="(!scope.row.addrNameList || !scope.row.addrNameList.length) "
                  class="city-text"
                >{{ $t("shop.pleaseSelectADeliveryArea") }}</span>
                <span>
                  <!-- {{scope.row.addrNameList.toString()}} -->
                  <span
                    v-for="(city,index) in scope.row.addrNameList"
                    :key="index"
                    class="city-text"
                  >{{ city }}</span>
                </span>
                <div
                  class="default-btn text-btn"
                  @click="onAddOrUpdate(`${scope.$index}`)"
                >
                  {{ $t("groups.edit") }}
                </div>
                <div
                  v-if="scope.$index>0"
                  class="default-btn text-btn"
                  @click="onDelete(`${scope.$index}`)"
                >
                  {{ $t("text.delBtn") }}
                </div>
              </template>
            </template>
          </el-table-column>
          <!-- 首件数量 -->
          <el-table-column
            :label="tableTitle[0]"
          >
            <template #default="scope">
              <el-form-item
                :prop="`transfees.${scope.$index}.firstPiece`"
                label-width="0px"
                :inline-message="true"
                :rules="[{ required: true, message: `${tableTitle[0]}${$t('publics.noNull')}`}]"
              >
                <div>
                  <el-input
                    v-model="scope.row.firstPiece"
                    type="number"
                    oninput="if(value.length>10)value=value.slice(0,10)"
                    :disabled="!scope.row.status && scope.$index === 0"
                    :min="1"
                    :max="1000000000"

                    @change="onCheckChargeType(scope.row,'firstPiece',dataForm.chargeType)"
                  />
                </div>
              </el-form-item>
            </template>
          </el-table-column>
          <!-- 首件邮费 -->
          <el-table-column
            :label="tableTitle[1]"
          >
            <template #default="scope">
              <el-form-item
                :prop="`transfees.${scope.$index}.firstFee`"
                label-width="0px"
                :inline-message="true"
                :rules="[{ required: true, message: `${tableTitle[1]}${$t('publics.noNull')}`,trigger: 'blur'}]"
              >
                <div>
                  <el-input-number
                    v-model="scope.row.firstFee"
                    :disabled="!scope.row.status && scope.$index === 0"
                    :precision="2"
                    :min="0"
                    :max="10000000000"
                  />
                </div>
              </el-form-item>
            </template>
          </el-table-column>
          <!-- 续件数量 -->
          <el-table-column
            :label="tableTitle[2]"
          >
            <template #default="scope">
              <el-form-item
                :prop="`transfees.${scope.$index}.continuousPiece`"
                label-width="0px"
                :inline-message="true"
                :rules="[{ required: true, message: `${tableTitle[2]}${$t('publics.noNull')}`}]"
              >
                <div>
                  <el-input
                    v-model="scope.row.continuousPiece"
                    type="number"
                    oninput="if(value.length>10)value=value.slice(0,10)"
                    :disabled="!scope.row.status && scope.$index === 0"
                    :max="10000000000"
                    :min="0"
                    @change="onCheckChargeType(scope.row,'continuousPiece',dataForm.chargeType)"
                  />
                </div>
              </el-form-item>
            </template>
          </el-table-column>
          <!-- 续件邮费 -->
          <el-table-column
            :label="tableTitle[3]"
          >
            <template #default="scope">
              <el-form-item
                :prop="`transfees.${scope.$index}.continuousFee`"
                label-width="0px"
                :inline-message="true"
                :rules="[{ required: true, message: `${tableTitle[3]}${$t('publics.noNull')}`,trigger: 'blur'}]"
              >
                <div>
                  <el-input-number
                    v-model="scope.row.continuousFee"
                    :disabled="!scope.row.status && scope.$index === 0"
                    :precision="2"
                    :min="0"
                    :max="10000000000"
                  />
                </div>
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div
        v-if="dataForm.isFreeFee == 0"
        style="margin-top: 20px;"
      >
        <div
          class="default-btn primary-btn icon-btn"
          @click="onAddTransfee()"
        >
          <el-icon><Location /></el-icon>
          {{ $t("shop.addAreaAndShipping") }}
        </div>
      </div>
      <!-- 添加可配送的区域和邮费 END -->
      <!-- 指定条件包邮 START -->
      <el-checkbox
        v-if="!dataForm.isFreeFee"
        v-model="dataForm.hasFreeCondition"
        style="margin-top:10px;font-size:50px"
      >
        {{ $t("shop.freeShippingOnSpecifiedConditions") }}
      </el-checkbox>
      <el-table
        v-if="dataForm.hasFreeCondition && !dataForm.isFreeFee"
        header-cell-class-name="table-header"
        row-class-name="table-row-low"
        :data="dataForm.transfeeFrees"
        style="width: 100%;"
      >
        <el-table-column
          align="left"
          fixed
          :label="$t('transport.selArea')"
        >
          <template #default="scope">
            <span
              v-if="!scope.row.freeAddrNameList || !scope.row.freeAddrNameList.length"
              class="city-text"
            >{{ $t("transport.selCity") }}</span>
            <span
              v-for="(city,index) in scope.row.freeAddrNameList"
              :key="index"
              class="city-text"
            >{{ city }}</span>
            <div
              class="default-btn text-btn"
              @click="onAddOrUpdateTransfeeFree(`${scope.$index}`)"
            >
              {{ $t("groups.edit") }}
            </div>
            <div
              v-if="scope.$index > 0"
              class="default-btn text-btn"
              @click="onDeleteTransfeeFree(`${scope.$index}`)"
            >
              {{ $t("text.delBtn") }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          style="min-width: 500px"
          :label="$t('transport.setShopPrice')"
        >
          <template #default="scope">
            <el-radio-group v-model="scope.row.freeType">
              <el-radio :label="0">
                {{ [$t("transport.byCount"),$t("transport.byWeight"),$t("transport.byVolume")][dataForm.chargeType] }}
              </el-radio>
              <el-radio :label="1">
                {{ $t("product.freeShiullAmount") }}
              </el-radio>
              <el-radio
                :label="2"
              >
                {{ [$t("transport.fullCount"),$t("transport.fullWeight"),$t("transport.fullVolume")][dataForm.chargeType] }}{{ $t("transport.fullAmount1") }}{{ $t("transport.shippingIncluded") }}
              </el-radio>
            </el-radio-group>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          width="300"
          align="right"
        >
          <template #default="scope">
            <!-- 满xx元包邮 -->
            <el-form-item
              v-if="scope.row.freeType == 1 || scope.row.freeType == 2"
              :prop="`transfeeFrees.${scope.$index}.amount`"
              label-width="0px"
              :rules="[{ required: true, message: `${$t('publics.noNull')}`}]"
            >
              <el-input
                v-model="scope.row.amount"
                type="number"

                width="200"
                oninput="if(value.length>10)value=value.slice(0,10)"
                :precision="2"
                :min="0"
                @change="onConvertPrice(scope.row,'amount')"
              >
                <template #prepend>
                  {{ $t("marketing.full") }}
                </template>
                <template #append>
                  {{ $t("platform.dollar") }}{{ $t("product.freeShipping") }}
                </template>
              </el-input>
            </el-form-item>
            <!-- 满xx件/重量/体积包邮 -->
            <el-form-item
              v-if="scope.row.freeType == 0 || scope.row.freeType == 2"
              :prop="`transfeeFrees.${scope.$index}.piece`"
              label-width="0px"
              :rules="[{ required: true, message: `${$t('publics.noNull')}`}]"
            >
              <el-input
                v-model="scope.row.piece"
                type="number"

                width="200"
                oninput="if(value.length>10)value=value.slice(0,10)"
                @change="onCheckChargeType(scope.row,'piece',dataForm.chargeType)"
              >
                <template #prepend>
                  {{ $t("marketing.full") }}
                </template>
                <template #append>
                  {{ [$t("transport.pieces"),'kg','m³'][dataForm.chargeType] }}
                </template>
              </el-input>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
      <div
        v-if="dataForm.isFreeFee == 0"
        style="margin-top: 20px"
      >
        <div
          :class="['default-btn primary-btn icon-btn', !dataForm.hasFreeCondition ? 'disabled-btn': '']"
          @click="onAddTransfeeFree()"
        >
          <el-icon><Location /></el-icon>
          {{ $t("shop.clickToAddTheSpecifiedShippingConditions") }}
        </div>
      </div>
      <!-- 指定条件包邮 END -->
    </el-form>
    <template #footer>
      <span

        class="dialog-footer"
      >
        <div
          class="default-btn"
          @click="onClose"
        >{{ $t("crud.filter.cancelBtn") }}</div>
        <div
          class="default-btn primary-btn"
          @click="onSubmit()"
        >{{ $t("crud.filter.submitBtn") }}</div>
      </span>
    </template>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update
      v-if="addOrUpdateVisible"
      ref="addOrUpdateRef"
      @refresh-data-list="onGetDataList"
    />
  </el-dialog>
</template>

<script setup>
import { areaNameList } from '@/utils/addr'
import AddOrUpdate from './transcity-add-or-update.vue'
import { ElMessage } from 'element-plus'

const emit = defineEmits(['refreshDataList', 'close'])

const hasFreeCondition = ref(0)
const visible = ref(false)
const addOrUpdateVisible = ref(false)
const dataForm = ref({
  hasFreeCondition: false,
  transName: '',
  createTime: '',
  chargeType: 0,
  transportId: 0,
  isFreeFee: 0,
  transfees: [{ cityList: [], status: 1 }],
  transfeeFrees: [{ freeCityList: [] }]
})
const page = reactive({
  total: 0, // 总页数
  currentPage: 1, // 当前页数
  pageSize: 10 // 每页显示多少条
})
let isSubmit = false
let transfeesBin = [] // 可配送区域运费，禁止选中列表
let transfeeFreesBin = [] // 指定条件包邮，禁止选中列表
let areaListDB = null
const tableTitle = computed(() => {
  const titles = [
    [
      $t('transport.firstPiece'),
      $t('transport.transportationCost'),
      $t('transport.continuationPiece'),
      $t('transport.continuationCost')
    ],
    [
      $t('transport.firstWeight'),
      $t('transport.transportationCost'),
      $t('transport.continuedWeight'),
      $t('transport.continuationCost')
    ],
    [
      $t('transport.firstVolume'),
      $t('transport.transportationCost'),
      $t('transport.continuedVolume'),
      $t('transport.continuationCost')
    ]
  ]
  if (dataForm.value.chargeType) {
    return titles[dataForm.value.chargeType]
  }
  return titles[0]
})
watch(() => visible.value, (val) => {
  // 如果当前对话框不可见，则关闭选择城市的对话框
  if (!val) {
    addOrUpdateVisible.value = false
  }
})

const dataFormRef = ref(null)
const init = (id) => {
  dataForm.value.transportId = id || 0
  visible.value = true
  isSubmit = false
  nextTick(() => {
    dataFormRef.value?.resetFields()
    dataForm.value = {
      hasFreeCondition: false,
      transName: '',
      createTime: '',
      chargeType: 0,
      transportId: id || 0,
      isFreeFee: 0,
      transfees: [{ cityList: [], status: 1 }],
      transfeeFrees: [{ freeCityList: [] }]
    }
  })
  transfeesBin = []
  transfeeFreesBin = []
  getTransport()
}
const loading = ref(false)
const getTransport = () => {
  if (dataForm.value.transportId) {
    loading.value = true
    http({
      // 获取运费模板数据
      url: http.adornUrl(`/platform/transport/info/${dataForm.value.transportId}`),
      method: 'get'
    }).then(({ data }) => {
      getAreaListInfo()
      if (data.isFreeFee) {
        data.transfees[0].status = 0
      } else {
        data.transfees[0].status = 1
      }
      dataForm.value = data
      if (!dataForm.value.transfeeFrees.length) {
        dataForm.value.transfeeFrees = [{ freeCityList: [] }]
      }
      dataForm.value.hasFreeCondition = !!data.hasFreeCondition
      handleBinAreas()
      loading.value = false
    })
  } else {
    getAreaListInfo()
    handleBinAreas()
  }
}
defineExpose({ init })
const onGetDataList = (row, cityList, type) => {
  if (type === 0) {
    dataForm.value.transfees[row].cityList = cityList
    const addrNameList = setAddrInfoByAreaList(cityList)
    dataForm.value.transfees[row].addrNameList = addrNameList
  }
  if (type === 1) {
    dataForm.value.transfeeFrees[row].freeCityList = cityList
    const addrNameList = setAddrInfoByAreaList(cityList)
    dataForm.value.transfeeFrees[row].freeAddrNameList = addrNameList
  }
  handleBinAreas()
}
/**
 * 获取省市区信息
 */
const getAreaListInfo = () => {
  http({
    url: http.adornUrl('/admin/area/areaListInfo'),
    method: 'get'
  }).then(({ data }) => {
    areaListDB = data
    areaListDB = removeNotThirdCategoryItem(areaListDB)
    if (dataForm.value.transfees.length > 0) {
      getAreaListByType(0)
    }
    if (dataForm.value.transfeeFrees.length > 0) {
      getAreaListByType(1)
    }
  })
}
const getAreaListByType = (type) => {
  if (type === 0) {
    for (let t = 0; t < dataForm.value.transfees.length; t++) {
      const addrNameList = setAddrInfoByAreaList(dataForm.value.transfees[t].cityList)
      dataForm.value.transfees[t].addrNameList = addrNameList
    }
  }
  if (type === 1) {
    for (let f = 0; f < dataForm.value.transfeeFrees.length; f++) {
      const addrNameList = setAddrInfoByAreaList(dataForm.value.transfeeFrees[f].freeCityList)
      dataForm.value.transfeeFrees[f].freeAddrNameList = addrNameList
    }
  }
}
/**
 * 去除没有三级分类的类目
 */
const removeNotThirdCategoryItem = (treeData) => {
  const firstCategory = treeData
  const length = firstCategory.length
  for (let i = 0, index = 0; i < length; i++) {
    if (firstCategory[index].level !== 3) {
      if (firstCategory[index].areas && firstCategory[index].areas.length > 0 && (firstCategory[index].areas.some(item => item.areas) || firstCategory[index].level !== 0)) {
        const secondCategory = firstCategory[index].areas
        firstCategory[index].areas = removeNotThirdCategoryItem(secondCategory)
      } else {
        firstCategory.splice(index, 1)
        // 当前位置的元素已经被删除，当前位置索引不用++
        continue
      }
    }
    index++
  }
  return firstCategory
}

// 收费方式切换
const onChangeChargeType = (type) => {
  dataForm.value.transfees.forEach(item => {
    item.firstPiece && onCheckChargeType(item, 'firstPiece', type)
    item.continuousPiece && onCheckChargeType(item, 'continuousPiece', type)
  })
  dataForm.value.transfeeFrees.forEach(item => {
    item.piece && onCheckChargeType(item, 'piece', type)
  })
}
// 价格格式化
const onConvertPrice = (row, attr) => {
  const price = +checkAmount(row[attr])
  row[attr] = price.toFixed(2)
}
// 根据收费方式格式化输入的值
const onCheckChargeType = (row, attr, chargeType) => {
  // 0：按件数  1：按重量  2：按体积
  if (chargeType === 0) {
    const number = getNumber(row[attr])
    row[attr] = number > 0 ? number : 1
  } else if (chargeType === 1 || chargeType === 2) {
    const price = +checkAmount(row[attr])
    row[attr] = price.toFixed(2)
  }
}
const getNumber = (num) => {
  num = Math.round(num)
  return num < 0 ? 0 : num
}
const checkAmount = (data) => {
  const reg = /^[1-9]\d*$|^[1-9]\d*\.\d\d?$|^0\.\d\d?$/
  let num = data
  if (!reg.test(data)) {
    num = +Number(num).toFixed(2)
  }
  if (num < 0) {
    num = 1
  }
  return num
}
/**
 * 将运费模板中的地址存入地址列表中
 */
const addOrUpdateRef = ref(null)
const setAddrInfoByAreaList = (cityList) => {
  let areaList = []
  areaList = JSON.parse(JSON.stringify(areaListDB))
  const addrNameList = areaNameList(areaList, cityList)
  return addrNameList
}
// 添加运费项
const onAddTransfee = () => {
  dataForm.value.transfees.push({ cityList: [], status: 1 })
}
// 删除运费项
const onDelete = (rowIndex) => {
  dataForm.value.transfees.splice(rowIndex, 1)
  handleBinAreas()
}
// 可配送区域和运费编辑
const onAddOrUpdate = (rowIndex) => {
  addOrUpdateVisible.value = true
  let allSelectCityList = []
  for (let i = 1; i < dataForm.value.transfees.length; i++) {
    if (rowIndex !== i) {
      const cityList = dataForm.value.transfees[i].cityList
      allSelectCityList = allSelectCityList.concat(cityList)
    }
  }
  nextTick(() => {
    addOrUpdateRef.value?.init(rowIndex, dataForm.value.transfees[rowIndex].cityList || [], allSelectCityList, 0, transfeesBin)
  })
}
// 添加指定包邮条件
const onAddTransfeeFree = () => {
  if (!dataForm.value.hasFreeCondition) {
    return
  }
  dataForm.value.transfeeFrees.push({ freeCityList: [] })
}
// 删除指定包邮条件
const onDeleteTransfeeFree = (rowIndex) => {
  dataForm.value.transfeeFrees.splice(rowIndex, 1)
  handleBinAreas()
}
// 指定包邮条件编辑
const onAddOrUpdateTransfeeFree = (rowIndex) => {
  addOrUpdateVisible.value = true
  let allSelectCityList = []
  for (let i = 1; i < dataForm.value.transfeeFrees.length; i++) {
    const freeCityList = dataForm.value.transfeeFrees[i].freeCityList
    allSelectCityList = allSelectCityList.concat(freeCityList)
  }
  nextTick(() => {
    addOrUpdateRef.value?.init(rowIndex, dataForm.value.transfeeFrees[rowIndex].freeCityList || [], allSelectCityList, 1, transfeeFreesBin)
  })
}
// 设置不可选中
const handleBinAreas = () => {
  transfeesBin = []
  transfeeFreesBin = []
  const transfees = dataForm.value.transfees
  const transfeeFrees = dataForm.value.transfeeFrees
  if (transfees.length > 0) {
    transfees.forEach(i => {
      if (i.cityList.length > 0) {
        i.cityList.forEach(j => {
          if (!judgeArrHaving(transfeesBin, j)) {
            transfeesBin.push(j.areaId)
          }
        })
      }
    })
  }
  if (transfeeFrees.length > 0) {
    transfeeFrees.forEach(i => {
      if (i.freeCityList.length > 0) {
        i.freeCityList.forEach(j => {
          if (!judgeArrHaving(transfeeFreesBin, j)) {
            transfeeFreesBin.push(j.areaId)
          }
        })
      }
    })
  }
}
const judgeArrHaving = (arr, data) => {
  let isExist = false
  if (arr.length < 1) {
    return isExist
  }
  if (arr.includes(data.areaId)) {
    isExist = true
  }
  // arr.forEach(item => {
  //   if (item === data.areaId) {
  //     isExist = true
  //   }
  // })
  return isExist
}
const emptyCityHint = () => {
  ElMessage({
    message: $t('shop.pleaseSelectADeliveryArea'),
    type: 'error',
    duration: 1500
  })
}
const formWriteHint = () => {
  ElMessage({
    message: $t('shop.pleaseWriteInfo'),
    type: 'error',
    duration: 1500
  })
}
// 表单提交
const onSubmit = () => {
  if (loading.value) return
  dataFormRef.value?.validate((valid) => {
    if (!valid) {
      formWriteHint()
    }
    if (valid) {
      if (!dataForm.value.transName.trim()) {
        return ElMessage.error($t('shop.templateNameCannotBeEmpty'))
      }

      const transFeesLen = dataForm.value.transfees.length || 0
      if (!transFeesLen) {
        emptyCityHint()
        return
      }
      for (let i = 0; i < transFeesLen; i++) {
        const transfee = dataForm.value.transfees[i]
        if (transfee.cityList.length === 0 && dataForm.value.isFreeFee === 0) {
          emptyCityHint()
          return
        }
      }
      if (dataForm.value.hasFreeCondition && (!dataForm.value.transfeeFrees || dataForm.value.transfeeFrees.length === 0)) {
        ElMessage({
          message: $t('shop.setRegionalConditions'),
          type: 'error',
          duration: 1500
        })
        return
      }
      if (dataForm.value.hasFreeCondition) {
        hasFreeCondition.value = 1
      } else {
        hasFreeCondition.value = 0
      }
      // console.log(dataForm.value.transfeeFrees.length, 'dataForm.value.transfeeFrees.lengthdataForm.transfeeFrees.length')
      // 指定区域条件判断
      if (hasFreeCondition.value === 1 && dataForm.value.transfeeFrees.length) {
        let flag = null
        // eslint-disable-next-line array-callback-return
        dataForm.value.transfeeFrees.some((item) => {
          if (!item.freeCityList[0]) {
            ElMessage({
              message: $t('shop.setRegionalConditions'),
              type: 'error',
              duration: 1500
            })
            flag = true
            return true
          }
          // console.log(item.hasOwnProperty('freeType'), 'item.hasOwnProperty("freeType")')
          // eslint-disable-next-line no-prototype-builtins
          if (!item.hasOwnProperty('freeType')) {
            ElMessage({
              message: $t('shop.pleaseAddTheSpecifiedShippingConditions'),
              type: 'error',
              duration: 1500
            })
            flag = true
            return true
          }
        })
        if (flag) {
          return
        }
      }
      // dataForm.value.transfees[0].cityList = []
      if (isSubmit) {
        return false
      }
      isSubmit = true
      loading.value = true
      http({
        url: http.adornUrl('/platform/transport'),
        method: dataForm.value.transportId ? 'put' : 'post',
        data: http.adornData({
          transportId: dataForm.value.transportId || undefined,
          transName: dataForm.value.transName,
          chargeType: dataForm.value.chargeType,
          isFreeFee: dataForm.value.isFreeFee,
          transfees: dataForm.value.transfees,
          transfeeFrees: dataForm.value.transfeeFrees,
          hasFreeCondition: hasFreeCondition.value
        })
      }).then(() => {
        loading.value = false
        ElMessage({
          message: $t('publics.operation'),
          type: 'success',
          duration: 1500,
          onClose: () => {
            visible.value = false
            emit('refreshDataList', page)
            onClose()
          }
        })
      }).catch((e) => {
        loading.value = false
        isSubmit = false
      })
    }
  })
}
const onClose = () => {
  emit('close', 'close')
}

</script>

<style lang="scss" scoped>
.transport-pop {
 :deep(.el-form-item__error--inline){
    margin-left: 0;
  }
  .city-text {
    display: inline-block;
    padding: 0 5px;
  }

  & :deep(.el-table.el-table--fit.el-table--enable-row-transition .el-form-item) {
    padding-top: 20px;
  }
  & :deep(.el-input-number--small .el-input-number__increase) {
    border-left: 1px solid #dcdfe6 !important;
    right: 1px !important;
  }
    // eslint-disable-next-line vue-scoped-css/require-v-deep-argument
    .area-transfee-table :deep(){
    .el-form-item__content{
      display: block;
    }
    .el-input {
      width: 150px;
    }
    .el-input-number.el-input-number--small {
      width: 172px;
    }
  }
}

</style>
